<template>
	<view class="sp_content" >
       <view class="header_content">
            <view class="header_left">
                <image style="height: 100%; width: 100%; " :src="dataInfo.main.hhImg || ''" />
            </view>

            <view class="header_right">
                <view class="info_top">
                    <view class="info_item">
                        <view class="label">品名:</view>
                        <view class="info_des">{{ dataInfo.main.pm || '' }} </view>
                    </view>

                    <view class="info_item">
                        <view class="label">货号:</view>
                        <view class="info_des">{{ dataInfo.main.huohaoname || '' }}</view>
                    </view>
                    <view class="info_item">
                        <view class="label">类别:</view>
                        <view class="info_des">{{ dataInfo.main.huohaotype || '' }}</view>
                    </view>
                </view>

                <view class="info_item" style="flex: 1; display: flex; align-items: flex-start;">
                    <view class="label">商品详情:</view>
                    <view class="info_des_content">{{ dataInfo.main.component || '' }}</view>
                </view>


                <view class="info_bottom">
                    <view class="info_item">
                        <view class="label">价格:</view>
                        <view class="info_des">￥{{ dataInfo.main.xsprice || 0 }}</view>
                    </view>

                    <view class="info_item">
                        <!-- <view class="label">已订购:</view>
                        <view class="info_des">1000 件</view> -->
                    </view>
                </view>
            </view>
         
       </view>

       <view class="swiper_content">
           <scroll-view style="height: 100%; " scroll-x="true">
                <view style="display: flex; height: 100%;">
                    <view  style="margin-right: 10rpx;" v-for="(item, index) in dataInfo.colordetail" :key="index" @click="addGoodsPopup(item, index)" >
                        <view style="width: 120rpx; height: 80%;">
                            <image style="height: 100%; width: 100%; " :src='item.color_img || "" ' />
                        </view>
                        <view style="text-align: center; border: 1rpx solid #ccc; margin-top: 10rpx; padding: 5rpx 0;"> {{ item.color || '' }} </view>
                    </view>
                </view>
            </scroll-view>
       </view>

       <!-- 滑动下单页面 -->
       <view class="detail_content" style="background: #fff; margin: 20rpx 5rpx;">
        <view style="display: flex; margin-bottom: 20rpx;" v-if="newTableList.length">
            <view>下单: </view>
            <view>(点击颜色订单数量可以修改)</view>
        </view>

        <!-- <view style="background: #fff;">
            <uni-table border stripe emptyText="暂无更多数据" >
                <uni-tr>
                    <uni-th  width="110" align="center">颜色/尺码</uni-th>
                    <uni-th align="center">合计</uni-th>
                    <uni-th align="center" v-for="(j, i) in tableList.data[0].chima" :key="i">
                        <text v-for="(k,v,n) in j" :key="v">{{v}}</text>
                    </uni-th>
                </uni-tr>
                <uni-tr v-for="(x, y) in tableList.data" :key="y">
                    <uni-td align="center" v-if="x.hj != 0">{{ x.color }}</uni-td>
                    <uni-td align="center" v-if="x.hj != 0"> {{ x.hj }}</uni-td>
                    <uni-td align="center" v-if="x.hj != 0" v-for="(w, v) in x.chima" :key="v"> 
                        <text v-for="(k,v,n) in w" :key="v">{{w[v]}}</text>
                    </uni-td>
                </uni-tr>

            </uni-table>
        </view> -->

        <view style="background: #fff;" v-if="newTableList.length" @click="handlePopup">
            <uni-table border stripe emptyText="暂无更多数据" >
                <uni-tr>
                    <uni-th  width="110" align="center">颜色/尺码</uni-th>
                    <uni-th align="center">合计</uni-th>
                    <uni-th align="center" v-for="(j, i) in newTableList[0].chima" :key="i">
                        {{ i }}
                    </uni-th>
                </uni-tr>
                <uni-tr v-for="(x, y) in newTableList" :key="y">
                    <uni-td align="center" v-if="x.hj != 0">{{ x.color }}</uni-td>
                    <uni-td align="center" v-if="x.hj != 0"> {{ x.hj }}</uni-td>
                    <uni-td align="center" v-if="x.hj != 0" v-for="(w, v) in x.chima" :key="v"> 
                        {{ w }}
                    </uni-td>
                </uni-tr>

            </uni-table>
        </view>

        <!--  -->
       </view>

        <!-- 弹出购物组件 -->
        <addGoods
            ref="addGoodsChild"
            @childAddGoods="childAddGoods"
            ></addGoods>

       <view class="bottom_content" style="background: #fff;">
            <button @click="goHome">
                <text class="iconfont icon-shouye"></text>
                <view>首页</view>
            </button>
            <!-- <button @click="handleCollection">
                <text :style="{color: showCollection ? '#ff8800' : ''}" :class="{'icon-shoucang': !showCollection, 'icon-shoucang2': showCollection}" class="iconfont"></text>
                <view>收藏</view>
            </button> -->
            <button @click="goPages">
                <text class="iconfont icon-gouwuche"></text>
                <view>购物车</view>
            </button>
            <button style="background: #f9a94d; color: #fff;" @click="addOrders()">加入订单</button>
       </view>
	</view>
</template>

<script>
import BottomPopup from '@/components/custom-bottom-popup/custom-bottom-popup.vue'; // 引入自定义组件
import centerPopup from '@/components/custom-center-popup/custom-center-popup.vue'; // 引入自定义组件
import addGoods from '@/components/add-goods/add-goods.vue'; // 引入自定义组件
import utils from "@/utils/utils.js";
import Http from '@/service/api'
import { mapState, mapMutations, mapActions } from "vuex";
	export default {
		components: {
			BottomPopup,
            centerPopup,
            addGoods,
		},
		data() {
			return {
                swiperImgList: [],
                showCollection: false, // 是否收藏

                tableList: [],
                newTableList: [],
                huohaobh: '', // 货号编号
                dataInfo: {
                    main: {},
                    colordetail: [],
                    chimadetail: [],
                }, // 详情数据

                childBackMap: {}
            }
		},
        computed: {
            ...mapState([
                "storesCart",
            ]),
        },
		onLoad(r) {
            this.huohaobh = r.huohaobh

            let param = {
                huohaobh: this.huohaobh,
            }
            Http.getHuohaoQueryInfo(param).then(r => {
                this.dataInfo = {
                    ...r,
                    chimadetail: r.chimadetail.map(i => ({...i, uuid_1: this.guid()})),
                    main: {
                        ...r.main,
                        uuid_1:  this.guid(),
                    }
                }
                console.log('== dataInfo ', this.dataInfo)

            }).catch(err => {
                uni.showToast({
                    title: err.message,
                    icon: 'none'
                });
            })
            this.statusBarHeight = this.$globalMap.statusBarHeight


            let b = utils.getTableData(1)
            this.tableList = b[0]
            console.log('== tableList ', this.tableList)

            console.log('== 11 ', uni.getStorageSync('loginData').LoginType )
		},
		methods: {
            guid() {
                return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
                    var r = Math.random() * 16 | 0,
                        v = c == 'x' ? r : (r & 0x3 | 0x8);
                    return v.toString(16);
                });
            },

            addGoodsPopup(item, index) {
                // 父组件 调用 子组件 的方法
                this.$refs.addGoodsChild.goDetailPopup(this.dataInfo, index)
            },
            handlePopup() {
                this.$refs.addGoodsChild.changeNum(this.childBackMap)
            },
            goHome() {
                uni.switchTab({
					url: './index'
				})
            },
            // 收藏
            handleCollection() {
                this.showCollection = !this.showCollection
                uni.showToast({
                    title: this.showCollection ? '收藏成功' : '取消收藏',
                    icon: 'none'
                });
            },

            // 子传父 保存的数据
            childAddGoods(param) {
                this.childBackMap = param
                console.log('== 购物订单 ', this.childBackMap)
                this.$refs.addGoodsChild.closeDrawer()

                this.newTableList = this.transformArr(param.colorList)
                console.log('== table ', this.newTableList)
            },

            addOrders() {
                console.log('== 加入购物车 ', this.childBackMap )

                if ( !Object.keys(this.childBackMap).length) {
                    uni.showToast({
                        title: '请选择商品',
                        icon: 'none'
                    });
                    return
                }

                let shopCartList = {
                    ...this.childBackMap,
                    hjPrice: (Number(this.childBackMap.main.xsprice) || 0) * this.childBackMap.hjsl,
                    colorList: this.childBackMap.colorList.filter(i => i.num).map(i => ({...i, chimaList: i.chimaList.map(j => ({...j, check: false})) })),
                    itemCheck: false,
                }

                uni.showToast({
                    title: '添加成功',
                    icon: 'none'
                });

                console.log('== 22 不删除 num ', [shopCartList])

                let a = this.mergeArrays(this.storesCart, [shopCartList])
                this.addCart_x(a) // 加入购物车
            },
            // 添加购物车 封装函数
            mergeArrays(arr, arr2) {
                arr2.forEach(item2 => {
                    const foundIndex = arr.findIndex(item => item.main.huohao === item2.main.huohao);

                    if (foundIndex !== -1) {
                        // 如果找到了相同的 huohao，更新 hjsl 和 hjPrice
                        arr[foundIndex].hjsl += item2.hjsl;
                        arr[foundIndex].hjPrice += item2.hjPrice;

                        // 更新 colorList
                        item2.colorList.forEach(colorItem2 => {
                            const colorItemIndex = arr[foundIndex].colorList.findIndex(colorItem => colorItem.color === colorItem2.color);

                            if (colorItemIndex !== -1) {
                                // 如果找到了相同的颜色，更新 num
                                arr[foundIndex].colorList[colorItemIndex].num += colorItem2.num;

                                // 更新 chimaList
                                colorItem2.chimaList.forEach(chimaItem2 => {
                                    const chimaItemIndex = arr[foundIndex].colorList[colorItemIndex].chimaList.findIndex(chimaItem => chimaItem.chima === chimaItem2.chima);

                                    if (chimaItemIndex !== -1) {
                                        // 如果找到了相同的尺码，更新 num
                                        arr[foundIndex].colorList[colorItemIndex].chimaList[chimaItemIndex].num += chimaItem2.num;
                                    } else {
                                        // 如果没有找到，添加新的尺码
                                        arr[foundIndex].colorList[colorItemIndex].chimaList.push({ ...chimaItem2 });
                                    }
                                });
                            } else {
                                // 如果没有找到，添加新的颜色
                                arr[foundIndex].colorList.push({ ...colorItem2 });
                            }
                        });
                    } else {
                        // 如果没有找到相同的 huohao，直接 push 到 arr
                        arr.push({ ...item2 });
                    }
                });

                return arr;
            },
            // 将数组 转换成 table 形式
            transformArr(arr) {
                return arr.map(item => {
                    // 创建一个新的对象
                    let transformedItem = {
                        hj: item.num,  // 直接提取 num 作为 hj
                        color: item.color,
                        chima: {}  // 初始化一个空对象，用于存放尺寸和对应的数量
                    };

                    // 遍历 chimaList，并填充 transformedItem.chima
                    item.chimaList.forEach(chima => {
                        transformedItem.chima[chima.chima] = chima.num;
                    });

                    return transformedItem;
                });
            },
            goPages() {
                uni.switchTab({
                    url: '../cart/cart'
                })
            },
            ...mapMutations([
                "addCart_x",
            ]),

            
		}
	}
</script>

<style lang="less" scoped>
.sp_content {
	height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    background: #f5f5f5;
    font-size: 16rpx;

    .header_content {
        display: flex;
        margin: 20rpx 5rpx;
        height: 300rpx;

        .header_left {
            width: 300rpx;
            height: 300rpx;
            background: #ccc;
        }

        .header_right {
            flex: 1;
            background: #fff;
            margin-left: 10rpx;
            padding: 5rpx 10rpx;
            overflow: hidden;

            display: flex;
            flex-direction: column;
        }

        .info_top {
            padding: 5rpx;
        }
        .info_item {
            display: flex;
            align-items: center;
            padding-bottom: 5rpx;
        }

        .label {
            white-space: nowrap;
            color: #b6b6b6;
        }
        .info_des {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .info_des_content {
            flex: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 10; /* 显示三行 */
            overflow: hidden; /* 超出部分隐藏 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
        }

        .info_bottom {
            display: flex;
            justify-content: space-between;
        }


    }


    .swiper_content {
        height: 240rpx;
        background: #fff;
        overflow: auto;
        padding: 5rpx;
    }

    .detail_content {
        flex: 1; 
        padding: 10rpx;
    }



   .bottom_content {
        display: flex;
        align-items: center;
        button {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #fff;
            color: #000;
            height: 60rpx;
            margin: 0rpx;
            border-radius: 0;
            .iconfont {
                font-size: 18rpx;
                margin-right: 10rpx;
            }
        }

        button:nth-child(4) {
            background: #f9a94d;
            color: #fff;
        }
   }
}


</style>
